<div class="uk-card uk-card-default"
     *ngIf="component">
    <div class="uk-card-header">
        <h3 class="uk-card-title uk-margin-remove-bottom">
            <a class="uk-link-reset"
               [routerLink]="[component.componentName]">
                {{component.title}}
                <span *ngIf="component.users && component.users.length">
                     [{{component.users[0].role === 99 ? '管理员' : '参与者'}}]
                </span>
            </a>
        </h3>
        <p class="uk-text-meta uk-margin-remove-top">
            {{component.componentName}}
        </p>
    </div>
    <div class="uk-card-body">
        <div [innerHtml]="component.description"></div>
        <ul class="uk-list">
            <li>
                <span>创建时间：</span>
                {{component.createTime | date: 'medium'}}
            </li>
            <li>
                <span>更新时间：</span>
                {{component.createTime | date: 'medium'}}
            </li>
        </ul>
    </div>
    <div class="uk-card-footer">
        <a [routerLink]="[component.componentName]"
           class="uk-button uk-button-text">
            详细了解
        </a>
    </div>
</div>
